<template>
	<view class="nx-userinfo">
		<view class="container" :class="{ 'slide-up': visible }">
			<view class="header-info">
				获取您的微信昵称，头像申请
			</view>
			<view class="avatar-box">
				<button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
					<image
						:src="userInfo.avatarUrl || 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
					</image>
					<text>选择头像</text>
				</button>
			</view>
			<view class="nickname-box">
				<input type="nickname" v-model="userInfo.nickname" @change="getNickname" placeholder="点击获取昵称" />
			</view>
			<view class="footer">
				<button class="btn" type="primary" @click="confirm">同意</button>
				<button @click="cancel">拒绝</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						nickname: '',
						avatarUrl: ''
					}
				},
			},
			custom: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false,
				userInfo: {
					nickname: '',
					avatarUrl: ''
				}
			}
		},
		mounted() {
			this.userInfo = this.data
			this.showModal()
		},
		methods: {
			showModal() {
				this.visible = true
				if (!this.custom) {
					uni.hideTabBar()
				}
			},
			closeModal(callback) {
				this.visible = false
				setTimeout(() => {
					if (!this.custom) {
						uni.showTabBar()
					}
					callback()
				}, 300)
			},
			chooseAvatar(e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl
			},
			getNickname(e) {
				this.userInfo.nickname = e.detail.value;
			},
			confirm() {
				this.closeModal(() => {
					this.$emit('confirm', this.userInfo)
				})
			},
			cancel() {
				this.closeModal(() => {
					this.$emit('cancel')
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.nx-userinfo {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column-reverse;

		.container {
			padding: 40rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			transform: translateY(100%);
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			&.slide-up {
				transform: translateY(0);
			}

			.header-info {
				margin-bottom: 40rpx;
			}

			.avatar-box {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;

				button {
					display: flex;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					background: none;
					color: #6a6a6a;
					font-size: 14px;
				}

				button::after {
					border: none;
				}

				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
				}
			}

			.nickname-box {
				margin-bottom: 40rpx;

				input {
					text-align: center;
				}
			}

			.footer {
				.btn {
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>